<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row :gutter="10">
          <div style="float:left">
            <RadioGroup v-model="order_type"
                        type="button"
                        button-style="solid"
                        @on-change="changeOrderType()">
              <Radio label="APP订单"></Radio>
              <Radio label="后台订单"></Radio>
            </RadioGroup>
          </div>
          <Button type="primary"
                  style="float:right;width:90px;height: 34px;font-size: 14px; margin-left:10px"
                  @click="exportData">导出</Button>
          <Button type="primary"
                  style="float:right;width:90px;height: 34px;font-size: 14px;"
                  @click="addOrder">添加</Button>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter_offline.agreement_name"
                   @on-search="searchOffline"
                   search
                   enter-button="查询"
                   placeholder="请输入合同名称"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter_offline.user_name"
                   @on-search="searchOffline"
                   search
                   enter-button="查询"
                   placeholder="请输入租赁方"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
        </Row>
        <Row class="margin-top-10 table_pattern">
          <Table :columns="columns_offline"
                 :data="list_offline"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation_offline.totalPage"
                :page-size="pagenation_offline.perPage"
                :current="pagenation_offline.currentPage"
                show-elevator
                show-total
                @on-change="changeOffline"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_order"
           :title="title"
           width="700px"
           :mask-closable="false"
           class="goods_modal">
      <Form :model="formValidate_offline"
            :label-width="130"
            ref="formValidate_offline"
            style='margin-left:60px'>
        <FormItem label="租赁方"
                  prop="user_name">
          <Input v-model="formValidate_offline.user_name"
                 style="width: 370px;"
                 placeholder='请输入租赁方' />
        </FormItem>
        <FormItem label="合同名称"
                  prop="agreement_name">
          <Input v-model="formValidate_offline.agreement_name"
                 style="width: 370px;"
                 placeholder='请输入合同名称' />
        </FormItem>
        <FormItem label="服务委托开始日期"
                  prop="date_start">
          <Input v-model="formValidate_offline.date_start"
                 style="width: 370px;"
                 placeholder='请输入服务委托开始日期' />
        </FormItem>
        <FormItem label="服务委托结束日期"
                  prop="date_end">
          <Input v-model="formValidate_offline.date_end"
                 style="width: 370px;"
                 placeholder='请输入服务委托结束日期' />
        </FormItem>
        <FormItem label="数量"
                  prop="num">
          <Input v-model="formValidate_offline.num"
                 style="width: 370px;"
                 placeholder='请输入数量' />
        </FormItem>
        <FormItem label="规格"
                  prop="specs">
          <Input v-model="formValidate_offline.specs"
                 style="width: 370px;"
                 placeholder='请输入规格' />
        </FormItem>
        <FormItem label="单价"
                  prop="unit_prize">
          <Input v-model="formValidate_offline.unit_prize"
                 style="width: 370px;"
                 placeholder='请输入单价' />
        </FormItem>
        <FormItem label="租赁时长"
                  prop="date_num">
          <Input v-model="formValidate_offline.date_num"
                 style="width: 370px;"
                 placeholder='请输入租赁时长' />
        </FormItem>
        <FormItem label="运费"
                  prop="money_yf">
          <Input v-model="formValidate_offline.money_yf"
                 style="width: 370px;"
                 placeholder='请输入运费' />
        </FormItem>
        <FormItem label="合同总价"
                  prop="money">
          <Input v-model="formValidate_offline.money"
                 style="width: 370px;"
                 placeholder='请输入合同总价' />
        </FormItem>
        <FormItem label="备注"
                  prop="intro">
          <Input v-model="formValidate_offline.intro"
                 type="textarea"
                 :rows="4"
                 style="width: 370px;"
                 placeholder='请输入备注' />
        </FormItem>
        <FormItem label="产品名称"
                  prop="product">
          <Input v-model="formValidate_offline.product"
                 style="width: 370px;"
                 placeholder='请输入产品名称' />
        </FormItem>
        <FormItem label="社会信用代码"
                  prop="code">
          <Input v-model="formValidate_offline.code"
                 style="width: 370px;"
                 placeholder='请输入社会信用代码' />
        </FormItem>
        <FormItem label="联系人"
                  prop="contact_user_name">
          <Input v-model="formValidate_offline.contact_user_name"
                 style="width: 370px;"
                 placeholder='请输入联系人' />
        </FormItem>
        <FormItem label="电话"
                  prop="contact_phone">
          <Input v-model="formValidate_offline.contact_phone"
                 style="width: 370px;"
                 placeholder='请输入电话' />
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="submitOrder()"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:100px">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_order_info"
           title="订单详情"
           width="600px"
           :mask-closable="false"
           class="public_modal_header edit_modal show_audit">
      <div id="orderDetail"
           style="padding: 20px 0; color:#000; font-size:16px">
        <div style="height:40px; margin-top:10px;display:flex;justify-content:center;align-items:center">
          <div style="float:left">
            <img src="https://qiniu.mocomedia.cn/Fif60241WY_lWg3AySaE0uCH2fXx.jpg"
                 style="border-radius:16px; width:32px; height:32px">
          </div>
          <div style="margin-top:2px;margin-left:10px;float:left;font-size:20px;font-weight:bolder">常电通用电需求全流程管理系统</div>
        </div>
        <div style="clear: both"></div>
        <div style="margin-top: 5px; padding-left: 50px;">
          <p style="margin-top:5px;margin-left:10px;font-weight:bolder">租赁方</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.user_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同名称</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.agreement_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">服务委托开始日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.date_start}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">服务委托结束日期</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.date_end}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">数量</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.num}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">规格</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.specs}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">单价</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.unit_prize}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">租赁时长</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.date_num}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">运费</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.money_yf}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同总价</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.money}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">备注</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.intro}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">产品名称</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.product}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">社会信用代码</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.code}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">联系人</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.contact_user_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">电话</p>
          <p style="margin-top:5px;margin-left:10px">{{formValidate_offline.contact_phone}}</p>
        </div>
      </div>
      <Button type="primary"
              v-print="'#orderDetail'"
              style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:13px; margin-bottom:20px">打印</Button>
    </Modal>
  </div>
</template>

<script>
import config from '@/config'
import Time from '@/tool/Time'
import { offlineOrderList, editOfflineOrder, changeOfflineOrderStatus } from '@/api/main'
export default {
  data () {
    return {
      order_type: '后台订单',
      show_order: false,
      show_order_info: false,
      title: '创建订单',
      pagenation_offline: {},
      filter_offline: {
        page: 0,
        page_size: 20,
        user_name: '',
        agreement_name: '',
      },
      list_offline: [],
      formValidate_offline: {
        user_name: '',
        agreement_name: '',
        date_start: '',
        date_end: '',
        num: 0,
        specs: '',
        unit_prize: '',
        date_num: 0,
        money_yf: '',
        money: '',
        intro: '',
        product: '',
        code: '',
        contact_user_name: '',
        contact_phone: '',
      },
      columns_offline: [
        {
          key: 'user_name',
          align: 'center',
          title: '租赁方',
        },
        {
          key: 'agreement_name',
          align: 'center',
          title: '合同名称',
        },
        {
          key: 'date_start',
          align: 'center',
          title: '服务委托开始日期',
        },
        {
          key: 'date_end',
          align: 'center',
          title: '服务委托结束日期',
        },
        {
          key: 'money',
          align: 'center',
          title: '合同价格',
        },
        {
          key: 'intro',
          align: 'center',
          title: '备注',
        },
        {
          key: 'product',
          align: 'center',
          title: '产品名称',
        },
        {
          key: 'contact_user_name',
          align: 'center',
          title: '联系人',
        },
        {
          key: 'contact_phone',
          align: 'center',
          title: '电话',
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.orderInfo(params.row)
                    },
                  },
                },
                '详情',
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.editOrder(params.row)
                    },
                  },
                },
                '编辑',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该订单吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeOfflineOrderStatus(obj).then(res => {
                        if (res.code === 0) {
                          let _this = this
                          this.$Message.success('删除成功')
                          let item = _this.list_offline.find(item => {
                            return item.id === params.row.id
                          })
                          let index = _this.list_offline.indexOf(item)
                          _this.list_offline.splice(index, 1)
                        } else {
                          this.$Message.success(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              )
            ])
          },
        },
      ],
    }
  },
  methods: {
    changeOrderType () {
      this.$router.push({ name: 'order_list' })
    },
    changeOffline: function (page) {
      this.filter_offline.page = page - 1
      this.initOffline()
    },
    searchOffline: function () {
      this.filter_offline.page = 0
      this.initOffline()
    },
    addOrder () {
      this.title = '新增订单'
      this.handleReset('formValidate_offline')
      this.formValidate_offline.id = 0
      this.show_order = true
    },
    editOrder (obj) {
      this.title = '编辑订单'
      this.formValidate_offline = Object.assign({}, obj)
      this.show_order = true
    },
    orderInfo (obj) {
      this.formValidate_offline = Object.assign({}, obj)
      this.show_order_info = true
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    submitOrder () {
      let _this = this
      if (_this.formValidate_offline.user_name == '') {
        this.$Message.error('请输入租赁方'); return;
      }
      if (_this.formValidate_offline.agreement_name == '') {
        this.$Message.error('请输入合同名称'); return;
      }
      if (_this.formValidate_offline.date_start == '') {
        this.$Message.error('请输入服务委托开始日期'); return;
      }
      if (_this.formValidate_offline.date_end == '') {
        this.$Message.error('请输入服务委托结束日期'); return;
      }
      if (_this.formValidate_offline.money == '') {
        this.$Message.error('请输入合同价格'); return;
      }
      if (_this.formValidate_offline.intro == '') {
        this.$Message.error('请输入合同备注'); return;
      }
      if (_this.formValidate_offline.product == '') {
        this.$Message.error('请输入产品名称'); return;
      }
      if (_this.formValidate_offline.code == '') {
        this.$Message.error('请输入社会信用代码'); return;
      }
      if (_this.formValidate_offline.contact_user_name == '') {
        this.$Message.error('请输入联系人'); return;
      }
      if (_this.formValidate_offline.contact_phone == '') {
        this.$Message.error('请输入电话'); return;
      }
      editOfflineOrder(_this.formValidate_offline).then(res => {
        if (res.code == 0) {
          _this.$Message.success('操作成功');
          _this.show_order = false
          _this.initOffline()
        } else {
          _this.$Message.error(res.text); return;
        }
      })
    },
    initOffline () {
      let _this = this
      offlineOrderList(_this.filter_offline).then(res => {
        _this.list_offline = res.data
        _this.pagenation_offline.currentPage = parseInt(res.currentPage) + 1
        _this.pagenation_offline.totalPage = parseInt(res.totalPage)
        _this.pagenation_offline.perPage = parseInt(res.perPage)
      })
    },
    formatJson (filter_offlineVal, jsonData) {
      return jsonData.map(v => filter_offlineVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter_offline.page = 0
      _this.filter_offline.page_size = 1000
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      offlineOrderList(this.filter_offline).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter_offline.page++
            _this.export()
          } else {
            _this.filter_offline.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['序号', '租赁方', '合同名称', '服务委托期限', '合同价格', '合同备注', '产品名称', '社会信用代码', '联系人', '电话'];
            const filter_offlineVal = ['id', 'user_name', 'agreement_name', 'date_start', 'date_end', 'money', 'intro', 'product', 'code', 'contact_user_name', 'contact_phone'];
            const data = _this.formatJson(filter_offlineVal, _this.export_list)
            export_json_to_excel(tHeader, data, '线下租赁订单')
          }
        }
      })
    },
  },
  mounted () {
    this.initOffline()
  },
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.left {
	width: 100%;
	//padding-left: 50px;
	p {
		color: #333;
		font-size: 14px;
		margin-bottom: 10px;
		line-height: 28px;
	}
}
</style>
